<template>
    <view class="card">
        <view class="topMsg">
            <view class="title">
                <image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
                <view class="rightTxt">
                    <view class="name fwb">企业名字</view>
                    <view class="name">农业/电子信息自动化申鹤</view>
                </view>
            </view>
            <view class="icon">
                <u-icon name="heart" size="26"></u-icon>
                <u-icon name="chat" size="26" @click="toTell"></u-icon>
                <u-icon name="trash" size="26"></u-icon>
            </view>
        </view>
        <view class="busGroup">
            <view v-for="i in 10">
                <view class="jobTag">
                    课程顾问
                    <text class="cr">12k</text>
                </view>
            </view>
        </view>
        <view class="successIcon">A</view>
    </view>
</template>

<script setup>
const toTell = () => {
    uni.navigateTo({
        url: '/pages/list/tell/tell'
    });
};
</script>

<style lang="scss">
.showIconP {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    @include flex-box-set();
    margin-right: 20rpx;
}

.successIcon {
    @extend .showIconP;
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid #999;
    border-radius: 50%;
    font-size: 50rpx;
    color: #999;
    font-weight: bold;
    @include flex-box-set();
    position: absolute;
    top: 20rpx;
    left: 320rpx;
    opacity: 0.6;
    &::after {
        display: block;
        content: '';
        border: 2rpx solid #999;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: scale(0.89);
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
    }
}
.card {
    margin: 40rpx 20rpx;
    padding: 25rpx;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12rpx;
    position: relative;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
    .topMsg {
        @include flex-box();
        .title {
            // @include flex-box();
            display: flex;
            .logo {
                width: 80rpx;
                height: 80rpx;
                margin-right: 20rpx;
            }
            .rightTxt {
                @include flex-box-set(between, start);
                flex-direction: column;
                font-size: 26rpx;
                .name {
                    @include ellipsis(1);
                }
            }
        }
        .icon {
            display: flex;
            gap: 20rpx;
        }
    }

    .busGroup {
        margin-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx 20rpx;
        .jobTag {
            display: inline-block;
            white-space: nowrap;
            padding: 5rpx 10rpx;
            border-radius: 10rpx;
            font-size: 28rpx;
            border: 1px solid #e3e3e3;
        }
    }
}
</style>
